import React, { useState, useEffect } from "react";
import PubSub from "pubsub-js";
import { componentType } from "../../../api/component/data.js";

import {
  Button,
  Drawer,
  Form,
  Row,
  Col,
  Input,
  Radio,
  Select,
  message,
} from "antd";

import { addComponent } from "../../../api/component/index";
const Option = Select.Option;

function AddNetworkComponent() {
  //设置状态
  const [isCreate, setIsCreate] = useState(false);

  useEffect(() => {
    PubSub.unsubscribe("isADD");
    PubSub.subscribe("isADD", (msg, data) => {
      setIsCreate(data["state"]);
    });
  });

  const onClose = () => {
    creatForm.resetFields();
    setIsCreate(false);
  };
  const [creatForm] = Form.useForm();
  const options = () => {
    let optionList = [];
    for (let i = 0; i < componentType.length; i++) {
      optionList.push(
        <Option value={componentType[i]["id"]}>
          {componentType[i]["name"]}
        </Option>
      );
    }
    return optionList;
  };
  const addComponents = (values) => {
    //设置类型
    values["id"] = `200000${new Date().getTime().toString()}`;
    values["state"] = {
      text: "已启动",
      value: "enabled",
    };
    values["creatorId"] = "19380120224";
    values["createTime"] = new Date().getTime();
    values["configuration"] = {
      host: "",
      port: "",
      maxMessageSize: 8096,
    };
    values["typeObject"] = {
      name: componentType.filter((item) => {
        return item["id"] === values["type"];
      })[0]["name"],
      text: componentType.filter((item) => {
        return item["id"] === values["type"];
      })[0]["name"],
      value: values["type"],
    };
    let addData = addComponent(values);
    addData.then((item) => {
      message.success(item["msg"]);
      PubSub.publish("reset2", true);
    });
    onClose();
  };
  return (
    <>
      <Drawer
        title="新建网络组件"
        width={420}
        onClose={onClose}
        visible={isCreate}
        bodyStyle={{ paddingBottom: 80 }}
        footer={
          <>
            <Button
              onClick={onClose}
              style={{ borderRadius: "4px", marginRight: "10px" }}
            >
              关闭
            </Button>
            <Button
              htmlType="submit"
              style={{ borderRadius: "4px" }}
              type="primary"
              onClick={() => {
                creatForm.submit();
              }}
            >
              保存
            </Button>
          </>
        }
        footerStyle={{ textAlign: "right" }}
      >
        <Form form={creatForm} colon={false} onFinish={addComponents}>
          <Row gutter={[16]}>
            <Col span={24}>
              <Form.Item
                name="name"
                label="组件名称"
                rules={[{ required: true, message: "请输入组件名称" }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="type"
                label="组件类型"
                rules={[{ required: true, message: "请选择组件类型" }]}
              >
                <Select>{options()}</Select>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="shareCluster"
                label="集群"
                rules={[{ required: true, message: "请选择集群" }]}
              >
                <Radio.Group>
                  <Radio value={true}>共享配置</Radio>
                  <Radio value={false}>独立配置</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Drawer>
    </>
  );
}

export default AddNetworkComponent;
